<template>
  <div class="com-container">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.updataChart)
  },
  mounted () {
    this.initChart()
    this.updataChart()
    window.addEventListener('resize', this.updataChart)
    this.updataChart()
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref)
    },
    updataChart () {
      const option = {
        backgroundColor: '#F5F5F5',
        title: {
          text: '中国非物质文化遗产地理分布',
          subtext: '数据来源：中国非物质文化遗产网',
          x: 'center',
          y: '3%',
          textStyle: {
            fontFamily: 'sans-serif',
            fontSize: 22,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#646464',
            fontFamily: 'sans-serif',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>非遗项目数量：{c}'
        },
        visualMap: {
          min: 0,
          max: 200,
          text: ['多', '少'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#FFE4C4', '#8B4513']
          }
        },
        series: [
          {
            name: '非遗项目数量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {name: '北京', value: 126},
              {name: '天津', value: 33},
              {name: '上海', value: 55},
              {name: '重庆', value: 89},
              {name: '河北', value: 138},
              {name: '河南', value: 158},
              {name: '云南', value: 168},
              {name: '辽宁', value: 126},
              {name: '黑龙江', value: 78},
              {name: '湖南', value: 145},
              {name: '安徽', value: 134},
              {name: '山东', value: 148},
              {name: '新疆', value: 102},
              {name: '江苏', value: 172},
              {name: '浙江', value: 186},
              {name: '江西', value: 132},
              {name: '湖北', value: 142},
              {name: '广西', value: 116},
              {name: '甘肃', value: 98},
              {name: '山西', value: 112},
              {name: '内蒙古', value: 92},
              {name: '陕西', value: 124},
              {name: '吉林', value: 82},
              {name: '福建', value: 136},
              {name: '贵州', value: 128},
              {name: '广东', value: 156},
              {name: '青海', value: 54},
              {name: '西藏', value: 76},
              {name: '四川', value: 164},
              {name: '宁夏', value: 42},
              {name: '海南', value: 48},
              {name: '台湾', value: 0},
              {name: '香港', value: 8},
              {name: '澳门', value: 6}
            ]
          }
        ]
      }
      this.chartInstance.setOption(option)
      this.chartInstance.resize()
    }
  }
}
</script>

<style>
</style>
